<template>
  <div class="scroll-wrapper">
    <div class="search-item-content" v-if="this.searchData.foodDatas.length > 0">
      <search-title :title="'美食结果'"></search-title>
      <food-list :foodList="searchData.foodDatas"></food-list>
    </div>

    <div class="search-item-content" v-if="this.searchData.hotelDatas">
      <search-title :title="'酒店结果'"></search-title>
      <hotel-list :hotelList="searchData.hotelDatas"></hotel-list>
    </div>

    <div class="search-item-content" v-if="this.searchData.ktvDatas">
      <search-title :title="'KTV结果'"></search-title>
      <ktv-list :ktv-list="searchData.ktvDatas"></ktv-list>
    </div>

    <div class="search-item-content" v-if="this.searchData.massageDatas">
      <search-title :title="'按摩结果'"></search-title>
      <massage-list :massage-list="searchData.massageDatas"></massage-list>
    </div>

    <div class="search-item-content" v-if="this.searchData.viewDatas">
      <search-title :title="'景点结果'"></search-title>
      <view-list :view-list="searchData.viewDatas"></view-list>
    </div>
  </div>
</template>

<script>
  import {
    SearchModel
  } from 'models/search.js'
  import {
    mapState
  } from 'vuex';
  import SearchTitle from 'components/ScrollWrapper/Sub/HomeTitle.vue';
  import FoodList from 'components/ScrollWrapper/FoodList/Index.vue';
  import HotelList from 'components/ScrollWrapper/HotelList/Index.vue';
  import KtvList from 'components/ScrollWrapper/KtvList/Index.vue';
  import MassageList from 'components/ScrollWrapper/MassageList/Index.vue';
  import ViewList from 'components/ScrollWrapper/ViewList/Index.vue';

  export default {
    name: 'SearchScroll',
    props: {
      keyword: String
    },
    data: function() {
      return {
        searchData: {}
      }
    },
    components: {
      SearchTitle,
      FoodList,
      HotelList,
      KtvList,
      MassageList,
      ViewList
    },
    methods: {
      getSearchData(keyword, cityId) {
        const model = new SearchModel();
        model.getSearchAction(keyword, cityId).then((res) => {
          if (res && res.status === 0) {
            this.searchData = res.data.data;
          }
        })
      }
    },
    computed: {
      ...mapState(['cityId'])
    },
    watch: {
      keyword() {
        this.getSearchData(this.keyword, this.cityId);
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
</style>
